<template>
	<view class="container">
        <u-toast ref="uToast" />
		<!-- 轮播图 -->
		<u-swiper class="swiper" :height="400" :list="swiperList" @click="toPageFromBanner"></u-swiper>
		<!-- 栅格导航 -->
		<u-grid class="grids" :col="3" :border="false">
			<u-grid-item :custom-style="{padding: '0'}" @click="() => toPage(4)">
				<image class="grid-img" src="../../static/img/home-base.png">
				<view class="grid-text">社区介绍</view>
			</u-grid-item>
			<u-grid-item :custom-style="{padding: '0'}" @click="() => toPage(5)">
				<image class="grid-img" src="../../static/img/home-aowei.png">
				<view class="grid-text">澳维养老院</view>
			</u-grid-item>
			<u-grid-item :custom-style="{padding: '0'}" @click="() => toPage(3)">
				<image class="grid-img" src="../../static/img/home-deji.png">
				<view class="grid-text">德颐护理院</view>
			</u-grid-item>
			<u-grid-item :custom-style="{padding: '0'}" @click="() => toPage(6)">
				<image class="grid-img" src="../../static/img/home-apartment.png">
				<view class="grid-text">产权式公寓</view>
			</u-grid-item>
			<u-grid-item :custom-style="{padding: '0'}" @click="() => toPage(7)">
				<image class="grid-img" src="../../static/img/home-zide.png">
				<view class="grid-text">自得公寓</view>
			</u-grid-item>
			<u-grid-item :custom-style="{padding: '0'}" @click="() => toPage(18)">
				<image class="grid-img" src="../../static/img/home-appraise.png">
				<view class="grid-text">恬愉会</view>
			</u-grid-item>
		</u-grid>
		<view class="card">
			<view class="card-title">
				<image class="card-orn" src="../../static/img/title-ornament.png">
				<view class="text">优惠政策与活动</view>
				<view v-if="articleList.length>=3" class="more">
					<view class="more-text" @click="toArticleList">更多</view>
					<image src="../../static/img/arrow-right.png">
				</view>
			</view>
			<view class="card-list">
				<view v-for="(item, index) in articleList" :key="index" class="card-item" :style="{'display': index < 3 ? 'flex' : 'none'}"  @click="() => toPage(item.articleId)">
					<image mode="aspectFill" :src="item.cover">
					<view class="card-info">
						<view class="card-info-title">{{item.title}}</view>
						<view class="card-info-text">{{item.guide}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    import Vue from 'vue';
	import { getArticleItemListAPI, getArticleListAPI } from '../../api/arc'
	import { Articles } from '../../api/config/enums'
	export default Vue.extend({
		data() {
			return {
				cardtitle: '每日快讯',
				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				$u: {
					route: Object
				},
				current: 0,
				bannerList: [],
				swiperList: [
					// {
					// 	image: 'https://ftp.bmp.ovh/imgs/2021/04/3300e567d4949563.png'
					// },{
					// 	image: 'https://ftp.bmp.ovh/imgs/2021/04/3300e567d4949563.png'
					// },{
					// 	image: 'https://ftp.bmp.ovh/imgs/2021/04/3300e567d4949563.png'
					// }
				],
				list: [{
						iconPath: "/static/img/tool.png",
						selectedIconPath: "/static/img/tool_select.png",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "/static/img/tool.png",
						selectedIconPath: "/static/img/tool_select.png",
						text: '会员服务',
						customIcon: false,
						pagePath: "/pages/vip/vip"
					},
					{
						iconPath: "/static/img/tool.png",
						selectedIconPath: "/static/img/tool_select.png",
						text: '健康商城',
						customIcon: false,
						pagePath: "/pages/shop/shop"
					},
					{
						iconPath: "/static/img/tool.png",
						selectedIconPath: "/static/img/tool_select.png",
						text: '我的',
						customIcon: false,
						pagePath: "/pages/mine/mine"
					},
				],
				articleList: []
			}
		},
		onLoad() {
			getArticleListAPI({
				itemId: Articles.communityBanner
			}).then(res => {
				this.bannerList = res.articlesList
				this.swiperList = res.articlesList.map((item, index) => {
					return {
						image: item.cover,
						title: `【${item.title}】${item.guide}`
					}
				})
			})
			getArticleListAPI({
				itemId: Articles.activities
			}).then(res => {
				this.articleList = res.articlesList
			}).catch(e => {
				this.$refs.uToast.show({
				    title: e,
				    type: 'error',
                })
			})
		},
		methods: {
			toWebview(){
				this.$u.route('pages/webview/webview')
			},
			noPage(){
				this.$refs.uToast.show({
				    title: '敬请期待',
				    type: 'default',
                })
			},
			toPage(id) {
				let route = this.$u.route
				route('pages/article/article', {
					articleId: id
				})
			},
			toPageFromBanner(index){
				// this.toPage(this.bannerList[index].articleId)
			},
			toArticleList(){
				this.$u.route('pages/articleList/articleList', {
					itemId: 11,
				})
			}
		}
	});
</script>

<style lang="scss" scoped>
	.swiper{
		width: 100%;
	}
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// background-color: #efefef;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.test{
		width: 200px;
		overflow-wrap: break-word;
	}
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.u-card-wrap { 
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
	.grids{
		padding: 25rpx 0;
		.grid-img{
			width: 120rpx;
			height: 120rpx;
		}
	}
	.grid-text{
		line-height: 60rpx;
	}
	.card{
		width: 100%;
		padding: 0 20rpx;
		.card-title{
			width: 100%;
			display: flex;
			padding: 10rpx 0;
			.card-orn{
				width: 10rpx;
				height: 40rpx;
				align-items: center;
				margin-right: 10rpx;
			}
			.text{
				flex: 1 1 auto;
				font-size: 36rpx;
				line-height: 40rpx;
			}
			.more{
				display: flex;
				.more-text{
					color: #666;
					line-height: 40rpx;
					margin-right: 10rpx;
				}
				image{
					width: 12rpx;
					height: 20rpx;
					margin-top: 10rpx;
				}
			}
		}
		.card-list{
			margin-top: 20rpx;
			.card-item{
				display: flex;
				margin-bottom: 15rpx;
				background-color: #fff;
				padding: 20rpx;
				box-shadow: 1px 1px 3px 1px #ccc;
				border-radius: 15rpx;
				image{
					width: 210rpx;
					height: 160rpx;
					flex: none;
					border-radius: 6rpx;
				}
				.card-info{
					flex: auto;
					margin-left: 20rpx;
					.card-info-title{
						width: 200px;
						box-sizing: border-box;
						height: 60rpx;
						font-size: 32rpx;
						line-height: 60rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						font-weight: bold;
					}
					.card-info-text{
						width: 100%;
						box-sizing: border-box;
						height: 80rpx;
						line-height: 40rpx;
						margin: 10rpx 0;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.card-info-bottom{
						display: flex;
						justify-content: space-between;
						margin-top: 40rpx;
						.card-info-bottom-left{
							width: 150rpx;
							height: 50rpx;
							position: relative;
							.card-info-bottom-left-text{
								position: absolute;
								top: 0;
								width: 100%;
								text-align: center;
								line-height: 50rpx;
								color: #fff;
							}
							image{
								width: 150rpx;
								height: 50rpx;
							}
						}
						.card-info-bottom-right{
							font-size: 36rpx;
							line-height: 50rpx;
							color: #ff4d4f
						}
					}
				}
			}
		}
	}
</style>
